<template>
  <view class="u-demo">
    <view class="u-demo-wrap">
      <view class="u-demo-title">演示效果</view>
      <view class="u-demo-area">
        <u-toast ref="uToast"></u-toast>
        <u-search
          v-model="value"
          @change="change"
          @custom="custom"
          @search="search"
          :shape="shape"
          :clearabled="clearabled"
          :show-action="showAction"
          :input-align="inputAlign"
          @clear="clear"
        ></u-search>
      </view>
    </view>
    <view class="u-config-wrap">
      <view class="u-config-title u-border-bottom"> 参数配置 </view>
      <view class="u-config-item">
        <view class="u-item-title">初始值</view>
        <u-subsection :list="['空', '天山雪莲']" @change="valueChange"></u-subsection>
      </view>
      <view class="u-config-item">
        <view class="u-item-title">搜索框形状</view>
        <u-subsection :list="['圆形', '方形']" @change="shapeChange"></u-subsection>
      </view>
      <view class="u-config-item">
        <view class="u-item-title">清除控件</view>
        <u-subsection :list="['启用', '关闭']" @change="clearabledChange"></u-subsection>
      </view>
      <view class="u-config-item">
        <view class="u-item-title">右侧控件</view>
        <u-subsection :list="['启用', '关闭']" @change="showActionChange"></u-subsection>
      </view>
      <view class="u-config-item">
        <view class="u-item-title">水平对齐方式</view>
        <u-subsection :list="['左', '中', '右']" @change="inputAlignChange"></u-subsection>
      </view>
    </view>
  </view>
</template>

<script>
import { $u } from '@/uni_modules/uview-pro'
export default {
  data() {
    return {
      value: '',
      shape: 'round',
      clearabled: true,
      showAction: true,
      inputAlign: 'left'
    }
  },
  watch: {
    // 这里的演示为证明通过v-model绑定值，它是双向绑定的，意味着您无需监听change事件
    // 也能知道value值当前的内容
    value(val) {
      // console.log(val);
    }
  },
  methods: {
    valueChange(index) {
      this.value = index == 0 ? '' : '天山雪莲'
    },
    shapeChange(index) {
      this.shape = index == 0 ? 'round' : 'square'
    },
    clearabledChange(index) {
      this.clearabled = index == 0 ? true : false
    },
    showActionChange(index) {
      this.showAction = index == 0 ? true : false
    },
    inputAlignChange(index) {
      this.inputAlign = index == 0 ? 'left' : index == 1 ? 'center' : 'right'
    },
    change(value) {
      // 搜索框内容变化时，会触发此事件，value值为输入框的内容
      //console.log(value);
    },
    custom(value) {
      //console.log(value);
      $u.toast('输入值为：' + value)
    },
    search(value) {
      $u.toast('搜索内容为：' + value)
    },
    clear() {
      // console.log(this.value);
    }
  }
}
</script>

<style lang="scss" scoped>
.u-demo {
}
</style>
